"use client"

import { useState, useEffect } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { SearchArtistResult } from "@/components/search/search-artist-result"
import { SearchSongsList } from "@/components/search/search-songs-list"
import { SearchPlaylistsGrid } from "@/components/search/search-playlists-grid"
import { SearchAlbumsGrid } from "@/components/search/search-albums-grid"
import { SearchMVsGrid } from "@/components/search/search-mvs-grid"
import { Skeleton } from "@/components/ui/skeleton"

export default function SearchPage() {
    const searchParams = useSearchParams()
    const router = useRouter()
    const query = searchParams.get("q") || ""
    const tabParam = searchParams.get("tab") || "comprehensive"
    const [activeTab, setActiveTab] = useState(tabParam)
    const [isLoading, setIsLoading] = useState(true)

    useEffect(() => {
        // 当URL参数中的tab变化时，更新activeTab
        setActiveTab(tabParam)
    }, [tabParam])

    useEffect(() => {
        // 模拟加载数据
        if (query) {
            setIsLoading(true)
            const timer = setTimeout(() => {
                setIsLoading(false)
            }, 1000)
            return () => clearTimeout(timer)
        } else {
            setIsLoading(false)
        }
    }, [query, activeTab])

    const handleTabChange = (value: string) => {
        setActiveTab(value)
        router.push(`/search?q=${encodeURIComponent(query)}&tab=${value}`)
    }

    if (!query) {
        return <div className="px-4 py-8 text-center text-muted-foreground">没有搜索结果</div>
    }

    return (
        <div className="px-4 py-4">
            <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
                <TabsList className="w-full justify-start mb-6 bg-transparent p-0 border-b">
                    {[
                        { id: "comprehensive", label: "综合" },
                        { id: "songs", label: "歌曲" },
                        { id: "playlists", label: "歌单" },
                        { id: "albums", label: "专辑" },
                        { id: "mvs", label: "MV" },
                    ].map((tab) => (
                        <TabsTrigger
                            key={tab.id}
                            value={tab.id}
                            className="px-6 py-2 data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none data-[state=active]:shadow-none"
                        >
                            {tab.label}
                        </TabsTrigger>
                    ))}
                </TabsList>

                <TabsContent value="comprehensive" className="mt-0">
                    {isLoading ? (
                        <SearchLoadingSkeleton />
                    ) : (
                        <div className="space-y-8">
                            <SearchArtistResult query={query} />
                            <SearchSongsList query={query} limit={5} showHeader />
                            <SearchPlaylistsGrid query={query} limit={4} showHeader />
                            <SearchAlbumsGrid query={query} limit={4} showHeader />
                            <SearchMVsGrid query={query} limit={4} showHeader />
                        </div>
                    )}
                </TabsContent>

                <TabsContent value="songs" className="mt-0">
                    {isLoading ? <SearchLoadingSkeleton type="songs" /> : <SearchSongsList query={query} />}
                </TabsContent>

                <TabsContent value="playlists" className="mt-0">
                    {isLoading ? <SearchLoadingSkeleton type="playlists" /> : <SearchPlaylistsGrid query={query} />}
                </TabsContent>

                <TabsContent value="albums" className="mt-0">
                    {isLoading ? <SearchLoadingSkeleton type="albums" /> : <SearchAlbumsGrid query={query} />}
                </TabsContent>

                <TabsContent value="mvs" className="mt-0">
                    {isLoading ? <SearchLoadingSkeleton type="mvs" /> : <SearchMVsGrid query={query} />}
                </TabsContent>
            </Tabs>
        </div>
    )
}

function SearchLoadingSkeleton({ type = "comprehensive" }) {
    if (type === "songs") {
        return (
            <div className="space-y-4">
                {Array(10)
                    .fill(0)
                    .map((_, i) => (
                        <div key={i} className="flex items-center space-x-4">
                            <Skeleton className="h-12 w-12 rounded" />
                            <div className="space-y-2">
                                <Skeleton className="h-4 w-40" />
                                <Skeleton className="h-3 w-24" />
                            </div>
                        </div>
                    ))}
            </div>
        )
    }

    if (type === "playlists" || type === "albums" || type === "mvs") {
        return (
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {Array(8)
                    .fill(0)
                    .map((_, i) => (
                        <div key={i} className="space-y-2">
                            <Skeleton className="aspect-square w-full rounded-md" />
                            <Skeleton className="h-4 w-full" />
                            <Skeleton className="h-3 w-2/3" />
                        </div>
                    ))}
            </div>
        )
    }

    return (
        <div className="space-y-8">
            <div className="space-y-4">
                <Skeleton className="h-20 w-full rounded-lg" />
            </div>
            <div className="space-y-4">
                {Array(3)
                    .fill(0)
                    .map((_, i) => (
                        <div key={i} className="flex items-center space-x-4">
                            <Skeleton className="h-12 w-12 rounded" />
                            <div className="space-y-2">
                                <Skeleton className="h-4 w-40" />
                                <Skeleton className="h-3 w-24" />
                            </div>
                        </div>
                    ))}
            </div>
            <div className="space-y-4">
                <Skeleton className="h-6 w-32" />
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    {Array(4)
                        .fill(0)
                        .map((_, i) => (
                            <div key={i} className="space-y-2">
                                <Skeleton className="aspect-square w-full rounded-md" />
                                <Skeleton className="h-4 w-full" />
                                <Skeleton className="h-3 w-2/3" />
                            </div>
                        ))}
                </div>
            </div>
        </div>
    )
}

